<template>
	<view class="reset">
		<view class="reset-from-wrap">
			<van-cell-group class="reset-from">
				<van-field
					clearable
					:border="false"
					@change="cName"
					use-button-slot
					placeholder="请输入新的昵称"
				></van-field>
				</van-field>
			</van-cell-group>
			<view class="resetPwd-btn"  :class="{'active': active}">
			<van-button
				size="large"
				custom-class="resetPwd-btn-reset"
				:loading="loading"
				@click="onSubmit"
			>
				确认修改
			</van-button>
			</view>
		</view>
	</view>
</template>

<script>
	
// import * as reg from '../../../common/utils/reg.js';
import { mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			loading: false,
			active: false,
			username: ''
		};
	},
	onLoad() {},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	methods: {
		...mapActions([
				'setUserInfo'
		]),
		cName (e) {
			this.username = e.detail;
			this.active =  this.username.length >= 2 &&  this.username.length <= 18 ? true : false 
		},
		onSubmit () {
			if (!this.active) return
			if (this.loading) return
			this.loading = true
			this.$http.resetName({
				uid: this.userInfo.id,
				name: this.username
			}).then(e => {
				if (e.data.msg.toLowerCase() === 'ok') {
					this.userInfo.name = this.username
					this.setUserInfo(this.userInfo).then(e => {
						uni.showToast({
							title: '修改成功', 
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					})
					return
				}
				uni.showToast({
					title: e.data.msg, 
					icon: 'none'
				});
				this.loading = false
			})
		}
		
	}
};
</script>

<style scoped lang="scss">
@import '../../../common/reset.scss';
</style>
